<template>
	<div>
		<el-form-item label="消息个数">
			<avue-input-number :disabled="disabled" :min="0" v-model="main.activeOption.showRowLength"></avue-input-number>
		</el-form-item>
		<el-collapse accordion>
			<el-collapse-item title="标题样式">
				<el-form-item label="字体类型">
					<avue-select filterable allow-create :disabled="disabled" v-model="main.activeOption.fontFamily" :dic="dicOption.fontFamily"></avue-select>
				</el-form-item>
				<el-form-item label="字体大小">
					<avue-input-number v-model="main.activeOption.fontSize" :max="200" :disabled="disabled"></avue-input-number>
				</el-form-item>
				<el-form-item label="字体颜色">
					<avue-input-color :disabled="disabled" v-model="main.activeOption.color"></avue-input-color>
				</el-form-item>
				<el-form-item label="字体间距">
					<avue-input-number :disabled="disabled" v-model="main.activeOption.split"></avue-input-number>
				</el-form-item>
				<el-form-item label="字体背景">
					<avue-input-color :disabled="disabled" v-model="main.activeOption.backgroundColor"></avue-input-color>
				</el-form-item>
				<el-form-item label="文字粗细">
					<avue-select :disabled="disabled" v-model="main.activeOption.fontWeight" :dic="dicOption.fontWeight"> </avue-select>
				</el-form-item>
			</el-collapse-item>
		</el-collapse>
		<el-collapse accordion>
			<el-collapse-item title="内容样式">
				<el-form-item label="字体类型">
					<avue-select filterable allow-create :disabled="disabled" v-model="main.activeOption.cFontFamily" :dic="dicOption.fontFamily"></avue-select>
				</el-form-item>
				<el-form-item label="字体大小">
					<avue-input-number v-model="main.activeOption.cFontSize" :max="200" :disabled="disabled"></avue-input-number>
				</el-form-item>
				<el-form-item label="字体颜色">
					<avue-input-color :disabled="disabled" v-model="main.activeOption.cColor"></avue-input-color>
				</el-form-item>
				<el-form-item label="字体间距">
					<avue-input-number :disabled="disabled" v-model="main.activeOption.cSplit"></avue-input-number>
				</el-form-item>
				<el-form-item label="字体背景">
					<avue-input-color :disabled="disabled" v-model="main.activeOption.cBackgroundColor"></avue-input-color>
				</el-form-item>
				<el-form-item label="文字粗细">
					<avue-select :disabled="disabled" v-model="main.activeOption.cFontWeight" :dic="dicOption.fontWeight"> </avue-select>
				</el-form-item>
				<el-form-item label="内容省略行数">
					<avue-input-number :disabled="disabled" :min="0" v-model="main.activeOption.contentRows"></avue-input-number>
				</el-form-item>
			</el-collapse-item>
		</el-collapse>
		<el-collapse accordion>
			<el-collapse-item title="滚动设置">
				<el-form-item label="开启">
					<avue-switch :disabled="disabled" v-model="main.activeOption.isScroll"></avue-switch>
				</el-form-item>
				<template v-if="main.activeOption.isScroll">
					<el-form-item label="速度">
						<avue-input-number :disabled="disabled" :min="0" v-model="main.activeOption.step"> </avue-input-number>
					</el-form-item>
				</template>
			</el-collapse-item>
			<el-collapse-item title="预警设置">
				<avue-crud :option="scrollTableAlarmOption" :data="main.activeOption.alarmConfig" @row-save="rowSaveAlarm" @row-del="rowDelAlarm" @row-update="rowUpdateAlarm">
				</avue-crud>
			</el-collapse-item>
		</el-collapse>
	</div>
</template>

<script>
import { dicOption, scrollTableAlarmOption } from "@/option/config";
export default {
	name: "messageList",
	inject: ["main", "contain"],
	data() {
		return {
			scrollTableAlarmOption: scrollTableAlarmOption,
			dicOption: dicOption,
			disabled: this.contain.activeObj.isLock
		};
	},
	methods: {
		rowSaveAlarm(row, done) {
			this.main.activeOption.alarmConfig.push(this.deepClone(row));
			done();
		},
		rowDelAlarm(row, index) {
			this.main.activeOption.alarmConfig.splice(index, 1);
		},
		rowUpdateAlarm(row, index, done) {
			this.main.activeOption.alarmConfig.splice(index, 1, this.deepClone(row));
			done();
		}
	}
};
</script>

<style></style>
